<!DOCTYPE html>
<html>
<head>
    <title>the5fire.com-backbone.js-Hello World</title>
</head>
<body>
    <button id="check">新手报到</button>
    <header>
        <div class="welcome-message">Welcome</div>
    </header>
    <a href="#/manual" class="href">manual</a>
    <div id="sidebar" style="width: 500px;height: 500px;"></div>
    <a href="http://www.the5fire.com">更多教程</a>
    <script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script>
    <script src="http://the5fireblog.b0.upaiyun.com/staticfile/underscore.js"></script>
    <script src="http://the5fireblog.b0.upaiyun.com/staticfile/backbone.js"></script>
    <script>
    (function ($) {
            var User = Backbone.Model.extend({});

            var user = new User({
                displayName:'Kate'
            });

            var WelcomeMessageView = Backbone.View.extend({
                el:'header .welcome-message',

                initialize:function() {
                    this.model.on('change:displayName',this.render,this);

                    this.render();
                },
                render:function(){
                    var displayName = this.model.get('displayName');
                    this.$el.html('Welcome '+displayName);

                    return this;
                }
            });

            var WelcomeMessageView = new WelcomeMessageView({
                model:user
            });
            // user.set('displayName','test');

            // var MyView = Backbone.View.extend({
            //     el:'#my-element',

            //     initialize:function() {
            //         this.render();
            //     },

            //     render:function() {
            //         this.$el.html('Hello World');
            //         return this;
            //     }
            // });

            // var myView = new MyView();
            // var Fruit = Backbone.Model.extend({
            //     validate:function(attrs, options) {
            //         if(attrs.quantity && !_.isNumber(attrs.quantity)) {
            //             return 'Quantity must be a number';
            //         }
            //     }
            // });
            // var test = new Fruit({
            //     name:'apple'
            // });

            // test.on('invalid',function(model,error){
            //     console.log(error);
            // });

            // test.save({'quantity':'a bunch'});




            // var AppRouter = Backbone.Router.extend({
            //     routes:{
            //         "posts/:id":"getPost",
            //         // "download/*path":"downloadFile",
            //         // ":route/:action":"loadView",
            //         "manual": "manual",
            //         "*actions":"defaultRoute",
            //     },

            //     getPost:function(id) {
            //         alert(id);
            //     },

            //     defaultRoute:function(actions) {
            //         alert(actions);
            //     },
            //     downloadFile:function(path) {
            //         alert(path);
            //     },
            //     loadView:function(route,action){
            //         alert(route + "_"+action);
            //     },
            //     manual:function() {
            //         alert("call manual");
            //         app_router.navigate("/posts/"+404,{trigger:true,replace:true});
            //     }
            // });

            // var app_router = new AppRouter;

            // Backbone.history.start();

    		// var Chapter = Backbone.Model.extend({
    		// 	validate:function(attrs,options) {
    		// 		if(attrs.end < attrs.start) {
    		// 			return "can't end before it starts";
    		// 		}
    		// 	}
    		// });
    		// var one = new Chapter({
    		// 	title:"Chapter One:The Beginning"
    		// });

    		// one.on('invalid',function(model,error) {
    		// 	alert(model.get("title")+" "+error);
    		// });

    		// one.set({
    		// 	start:15,
    		// 	end:10
    		// });

    		// if(!one.isValid()) {
    		// 	alert(one.get("title") + " "+one.validationError);
    		// }

//  		Backbone.sync = function(method,model) {
//  			alert(method + ":" +JSON.stringify(model));
//  			model.set({'id':1});
//  		};
//  		
//  		var book = new Backbone.Model({
//  			title:"The Rough Riders",
//  			author:"Theodore Roosevelt"
//  		});
//  		
//  		book.save();
//  		book.save({author:"Teddy"});
    		
//  		var Meal = Backbone.Model.extend({
//  			idAttribute:"_id"
//  		});
//  		var cake = new Meal({_id:1,name:"Cake"});
//  		alert("Cake id:"+cake.id);
////  		var object = {};
//		
//		_.extend(object, Backbone.Events);
//		
//		object.on("alert", function(msg) {
//		  alert("Triggered " + msg);
//		});
//		
//		object.trigger("alert", "an event");
//		view.listenTo(model,'change',view render);
//  		var ItemView = Backbone.View.extend({
//  			tagName:'li'
//  		});
//  		var BodyView = Backbone.View.extend({el:'body'});
//  		var item = new ItemView();
//  		var body = new BodyView();
//  		alert(item.el+' '+body.el);
//  		var Workspace = Backbone.Router.extend({
//  			routes:{
//  				"help":"help",
//  				"search/:query": "search",
//  				"search/:query/p:page": "search"
//  			},
//  			help:function() {
//  				alert("this is help");
//  			}
//  			
//  			search:function() {
//  				alert("this is search");
//  			}
//  		});
    	
//  	var Meal = Backbone.Model.extend({
//  		defaults:{
//  			"apptizer":"caesar salad",
//  			"entree":"ravioli",
//  			"dessert":"cheesecake"
//  		}
//  	});
//  	
////  	alert("Dessert will be "+(new Meal).get('dessert'));
//	alert(JSON.stringify(new Meal));
    	
    	
    	
    	
    	
//  		var Sidebar = Backbone.Model.extend({
//  			promptColor:function() {
//  				var cssColor = prompt("Please enter a CSS color:");
//  				this.set({color:cssColor});
//  			}
//  		});
//  		
//  		sidebar = new Sidebar;
//  		
//  		sidebar.on('change:color',function(model, color) {
//  			$('#sidebar').css({background:color});
//  		});
//  		
//  		sidebar.set({color:'white'});
//  		sidebar.promptColor();
    		
    	
    	
//  		var Book = Backbone.Model.extend({
//  			defaults:{
//  				title:'default'
//  			},
//  			initialize:function() {
//  				alert('Hey,you create me!');
//  			}
//  		})
//  		
//  		var BookShelf = Backbone.Collection.extend({
//  			model:Book
//  		});
//  		var book1 = new Book({title:'book1'});
//  		var book2 = new Book({title:'book2'});
//  		var book3 = new Book({title:'book3'});
//  	
//  		var bookShelf = new BookShelf;
//  		
//  		bookShelf.add(book1);
//  		bookShelf.add(book2);
//  		bookShelf.add(book3);
//  		bookShelf.remove(book3);
//  		
//  		bookShelf.each(function(book) {
//  			alert(book.get('title'));
//  		});
//  		
//  		bookShelf.url = '/books/';
//  		bookShelf.fetch({
//  			success:function(collection,response,options){
//  				collection.each(function(book)){
//  					alert(book.get('title'));
//  				});
//  			}),error:function(collection,response,options) {
//  				alert('error');
//  			}
//  		});
    	
    	
    	
//		var Man = Backbone.Model.extend({
//			url:'/man/',
//			initialize:function() {
//				alert("Hey,you create me !");
//				this.bind("change:name",function() {
//					var name = this.get("name");
//					alert("你改变了name属性为"+name);
//				});
//				this.bind("invalid",function(model,error) {
//					alert(error);
//				});
//			},
//			defaults:{
//				name:'张三',
//				age:38
//			},
//			validate:function(attributes) {
//				if(attributes.name == '') {
//					return "name 不能为空！";
//				}
//			},
//			aboutMe:function() {
//				return '我叫'+this.get('name')+"，今年"+this.get('age')+'岁';
//			}
//		});
////		var man = new Man;
////		man.set({name:'the five'});
//		
////		man.set({name:"the five.com"});
////  		man.set({name:''});
////  		man.save();
//  		
//  		var man1 = new Man;
////  		man.fetch();
////  		man1.fetch({url:'/man/'});
//  		
//  		man1.fetch({url:'/man/',
//  			success:function(model,response) {
//  				alert('success');
//  				alert(model.get('name'));
//  			},error:function() {
//  				alert('error');
//  			}
//  		});
    		
    		
    		
    		
    		
//  	
//  	
//      World = Backbone.Model.extend({
//          //创建一个World的对象，拥有name属性
//          name: null
//      });
//
//      Worlds = Backbone.Collection.extend({
//          //World对象的集合
//          initialize: function (models, options) {
//                  this.bind("add", options.view.addOneWorld);
//          }
//      });
//
//      AppView = Backbone.View.extend({
//          el: $("body"),
//          initialize: function () {
//              //构造函数，实例化一个World集合类
//              //并且以字典方式传入AppView的对象
//              this.worlds = new Worlds(null, { view : this })
//          },
//          events: {
//              //事件绑定，绑定Dom中id为check的元素
//              "click #check":  "checkIn",
//          },
//          checkIn: function () {
//              var world_name = prompt("请问，您是哪星人?");
//              if(world_name == "") world_name = '未知';
//              var world = new World({ name: world_name });
//              this.worlds.add(world);
//          },
//          addOneWorld: function(model) {
//              $("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候：hello world！</li>");
//          }
//      });
//      //实例化AppView
//      var appview = new AppView;
    })(jQuery);
    </script>
</body>
</html>